<template>
	<div class="warn-environment-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-form :inline="true" :model="formInline" size="mini">
				<el-form-item label-width="100px" label="区域">
					<el-input v-model="formInline.areaName" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-form-item label-width="100px" label="类别">
					<el-select v-model="formInline.environmentType" placeholder="请选择">
								<el-option value="" label="全部"></el-option>
								<el-option :value="5" label="温度"></el-option>
								<el-option :value="6" label="湿度"></el-option>
								<el-option :value="7" label="烟感"></el-option>
								<el-option :value="8" label="水侵"></el-option>
								<el-option :value="9" label="空气质量"></el-option>
							</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 20px">
					<el-button type="primary" @click="init" icon="el-icon-search" size="small">查询</el-button>
					<el-button type="success" plain @click="onExportExcel" icon="el-icon-document" size="small">导出</el-button>
				</el-form-item>
			</el-form>
			<el-table
				ref="multipleTable" border
				id="tableExcel"
				:data="tableData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				:row-style="{ height: '40px' }"
				:cell-style="{ padding: '0' }"
				size="medium"
				style="width: 100%"
			>
				<el-table-column align="center" label="序号" width="60" type="index" />
				<el-table-column align="center" property="areaName" sortable prop="areaName" label="区域" show-overflow-tooltip />
				<el-table-column align="center" property="environmentType" sortable label="类别" show-overflow-tooltip :formatter="fmtType"></el-table-column>
				<el-table-column align="center" property="valInfo" sortable label="值" show-overflow-tooltip :formatter="fmtValue"></el-table-column>
				<el-table-column align="center" property="noticeTime" sortable label="预警时间" show-overflow-tooltip> 
					<template #default="scope">{{ `${dateFormatTime(scope.row.noticeTime)}` }}</template>
				</el-table-column>
				<el-table-column align="center" sortable label="内容" width="500px" show-overflow-tooltip>
					<template #default="scope">
						<el-link v-if="scope.row.environmentType == 5" type="danger">当前区域温度超出正常设定温度，请及时处理</el-link>
						<el-link v-if="scope.row.environmentType == 6" type="danger">当前区域湿度超出正常设定湿度，请及时处理</el-link>
						<el-link v-if="scope.row.environmentType == 7" type="danger">当前区域烟感报警,请及时处理</el-link>
						<el-link v-if="scope.row.environmentType == 8" type="danger">当前区域水侵报警,请及时处理</el-link>
						<el-link v-if="scope.row.environmentType == 9" type="danger">当前区域空气质量报警,请及时处理</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:page-sizes="[100, 200, 300, 400]"
			:page-size="state.formInline.pageSize"
				layout="prev, pager, next, jumper,total,sizes"
			:total="total"
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				prev-text="上一页"
				next-text="下一页"
				background
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import {toRefs, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { queryEnvironment } from '/@/api/warn/index';
import { exportExcel } from '/@/common/excel';
import { dateFormatTime } from '/@/common/index';
export default {
	name: 'warnEnvironment',
	components: {},
	setup() {
		const router = useRouter();
		const state = reactive({
			total: 0,
			formInline: {
				page: 1,
				pageSize: 10,
				areaName: '',
				environmentType: '',
			},
			tableData: [],
		});

		async function init() {
			await queryEnvironment(state.formInline).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.total = res.data.totalCount;
				}
			});
		}

		const onDetailsInfo = (row: any) => {
			router.push({
				path: '/evidence/unit/details',
				query: { caseid: row.caseId },
			});
		};

		const onHandleCurrentChange = (page) => {
			state.formInline.page = page;
			init();
		};

		const onHandleSizeChange = (pageIndex) => {
			state.formInline.pageSize = pageIndex;
			init();
		};

		const onExportExcel = () => {
			exportExcel('tableExcel', '预警', '预警-环境异常数据列表.xlsx');
		};

		function fmtType(row,col,val){
			switch(val){
				case 5:return "温度";
				case 6:return "湿度";
				case 7:return "烟感";
				case 8:return "水侵";
				case 9:return "空气质量";
			}
		}

		function fmtValue(row,col,val){
			switch(row.environmentType){
				case 5:return val;
				case 6:return val;
				case 7:return row.IsNormal?"正常":"异常";
				case 8:return row.IsNormal?"正常":"异常";
				case 9:return row.IsNormal?"正常":"异常";
			}
		}


		init();

		return {
			init,
			fmtType,
			fmtValue,
			onExportExcel,
			onHandleCurrentChange,
			onHandleSizeChange,
			onDetailsInfo,
			state,
			dateFormatTime,
			...toRefs(state),
		};
	},
};
</script>
